<template>
  <div class="md-example-child md-example-child-cashier">
    <md-cashier
      ref="cashier"
      v-model="isCashierhow"
      :channels="cashierChannels"
      :payment-amount="cashierAmount"
      payment-describe="关于支付金额的特殊说明"
    >
      <div slot-scope="{ scene }" slot="header">
        <md-notice-bar
          v-if="scene === 'choose'"
          mode="closable"
          icon="warn"
          type="warning"
        >
          该银行3:00-12:00系统维护，请更换其他银行卡
        </md-notice-bar>
      </div>
    </md-cashier>
	</div>
</template>

<script>import {Button, Cashier, NoticeBar} from 'mand-mobile'

export default {
  name: 'cashier-demo',
  components: {
    [Button.name]: Button,
    [Cashier.name]: Cashier,
    [NoticeBar.name]: NoticeBar,
  },
  data() {
    return {
      isCashierhow: true,
      cashierAmount: '100.00',
      cashierChannels: [
        {
          icon: 'cashier-icon-1',
          text: 'XX银行(1234)',
          desc: '当前银行维护中',
          value: '001',
          disabled: true,
          action: {
            text: '更换',
          },
        },
      ],
    }
  },
  computed: {
    cashier() {
      return this.$refs.cashier
    },
  },
}
</script>

<style lang="stylus">
.md-example-child-cashier
  .md-field
    margin-bottom 30px
  .md-cashier-channel-item
    .item-icon.cashier-icon-1
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-2
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-3
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-4
      background url('') center no-repeat
      background-size 26px
    .item-icon.cashier-icon-5
      background url('') center no-repeat
      background-size 26px
</style>
